import IResponse from "@/services/response.service";
import { Injectable } from "@nestjs/common";
import axios from "axios";
import * as mockjs from "mockjs";
import { defer, map } from "rxjs";

@Injectable()
export class FranceService {
  getArticle(query: any) {
    return IResponse.success({
      "id": 443,
      "admin_id": 46,
      "category_id": 595,
      "name": "去法国应该去哪游玩",
      "type": 0,
      "start_time": null,
      "end_time": null,
      "redirect_type": 0,
      "app_id": null,
      "app_path": null,
      "attachment_type": 0,
      "qrcode": null,
      "cover": "https://tradecms.dragontrail.com/storage/images/b7P5XOlYMGdGvk8qMrPQKy9xoLdEpcmQX5ilmr46.jpeg",
      "is_url": false,
      "url": "/news/443",
      "content": "<p data-style=\"margin-bottom: 16px; color: rgb(51, 51, 51); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; font-size: 16px; letter-spacing: normal; text-align: start; text-wrap: wrap;\" class=\"js_darkmode__0\" style=\"-webkit-tap-highlight-color: transparent; margin-top: 0px; margin-bottom: 16px; padding: 0px; outline: 0px; max-width: 100%; color: rgb(51, 51, 51); clear: both; min-height: 1em; text-wrap: wrap; background-color: rgb(25, 25, 25); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; visibility: visible; box-sizing: border-box !important; overflow-wrap: break-word !important;\">前言</p><p data-style=\"margin-bottom: 16px; color: rgb(51, 51, 51); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; font-size: 16px; letter-spacing: normal; text-align: start; text-wrap: wrap;\" class=\"js_darkmode__1\" style=\"-webkit-tap-highlight-color: transparent; margin-top: 0px; margin-bottom: 16px; padding: 0px; outline: 0px; max-width: 100%; color: rgb(51, 51, 51); clear: both; min-height: 1em; text-wrap: wrap; background-color: rgb(25, 25, 25); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; visibility: visible; box-sizing: border-box !important; overflow-wrap: break-word !important;\">介绍了三种在移动端隐藏滚动条的方法：通过 overflow 属性隐藏、使用 clip-path 进行裁剪、以及通过 mask 遮罩实现。今日前端早读课文章由 @XboxYan 分享，公号：前端侦探授权。</p><p data-style=\"margin-bottom: 16px; color: rgb(51, 51, 51); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; font-size: 16px; letter-spacing: normal; text-align: start; text-wrap: wrap;\" class=\"js_darkmode__2\" style=\"-webkit-tap-highlight-color: transparent; margin-top: 0px; margin-bottom: 16px; padding: 0px; outline: 0px; max-width: 100%; color: rgb(51, 51, 51); clear: both; min-height: 1em; text-wrap: wrap; background-color: rgb(25, 25, 25); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; visibility: visible; box-sizing: border-box !important; overflow-wrap: break-word !important;\">正文从这开始～～</p><p data-style=\"margin-bottom: 16px; color: rgb(51, 51, 51); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; font-size: 16px; letter-spacing: normal; text-align: start; text-wrap: wrap;\" class=\"js_darkmode__3\" style=\"-webkit-tap-highlight-color: transparent; margin-top: 0px; margin-bottom: 16px; padding: 0px; outline: 0px; max-width: 100%; color: rgb(51, 51, 51); clear: both; min-height: 1em; text-wrap: wrap; background-color: rgb(25, 25, 25); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; visibility: visible; box-sizing: border-box !important; overflow-wrap: break-word !important;\">在移动端开发中，经常会碰到需要横向滚动的场景，例如这样的</p><p data-style=\"margin-bottom: 16px; color: rgb(51, 51, 51); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; font-size: 16px; letter-spacing: normal; text-align: start; text-wrap: wrap;\" class=\"js_darkmode__4\" style=\"-webkit-tap-highlight-color: transparent; margin-top: 0px; margin-bottom: 16px; padding: 0px; outline: 0px; max-width: 100%; color: rgb(51, 51, 51); clear: both; min-height: 1em; text-wrap: wrap; background-color: rgb(25, 25, 25); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; visibility: visible; box-sizing: border-box !important; overflow-wrap: break-word !important;\"><img class=\"rich_pages wxw-img __bg_gif\" data-imgfileid=\"503788975\" data-ratio=\"0.5\" data-src=\"https://tradecms.dragontrail.com/storage/202408/22/rQuaBXpDSVQqJCGQkTLFic2gl23h0D0D.gif\" data-w=\"1080\" data-original-style=\"null\" data-index=\"1\" src=\"https://mmbiz.qpic.cn/mmbiz_gif/xvBbEKrVNtJkBLUd0o14XO3gwEgKsibiaP0flIlLKPWGmmZZiboNFCO4TE88qeQgic18J98UxlX7yckuFj8xuMWsnQ/640?wx_fmt=gif&wxfrom=5&wx_lazy=1&tp=webp\" _width=\"677px\" data-order=\"0\" alt=\"图片\" data-fail=\"0\" style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; vertical-align: bottom; height: auto !important; visibility: visible !important; width: 677px !important;\"/></p><p data-style=\"margin-bottom: 16px; color: rgb(51, 51, 51); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; font-size: 16px; letter-spacing: normal; text-align: start; text-wrap: wrap;\" class=\"js_darkmode__5\" style=\"-webkit-tap-highlight-color: transparent; margin-top: 0px; margin-bottom: 16px; padding: 0px; outline: 0px; max-width: 100%; color: rgb(51, 51, 51); clear: both; min-height: 1em; text-wrap: wrap; background-color: rgb(25, 25, 25); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; visibility: visible; box-sizing: border-box !important; overflow-wrap: break-word !important;\">但很多时候是不需要展示这个滚动条的，也就是这样的效果，如下</p><p data-style=\"margin-bottom: 16px; color: rgb(51, 51, 51); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; font-size: 16px; letter-spacing: normal; text-align: start; text-wrap: wrap;\" class=\"js_darkmode__6\" style=\"-webkit-tap-highlight-color: transparent; margin-top: 0px; margin-bottom: 16px; padding: 0px; outline: 0px; max-width: 100%; color: rgb(51, 51, 51); clear: both; min-height: 1em; text-wrap: wrap; background-color: rgb(25, 25, 25); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; visibility: visible; box-sizing: border-box !important; overflow-wrap: break-word !important;\"><img class=\"rich_pages wxw-img __bg_gif\" data-imgfileid=\"503788977\" data-ratio=\"0.5\" data-src=\"https://tradecms.dragontrail.com/storage/202408/22/jozDQojewjZQXR8ObzlYayUCfCkDfYhB.gif\" data-w=\"1080\" data-original-style=\"null\" data-index=\"2\" src=\"https://mmbiz.qpic.cn/mmbiz_gif/xvBbEKrVNtJkBLUd0o14XO3gwEgKsibiaP3WWx8mrKzW6kkM1m5WtKIQ7B6bQ3BkTjcXhTKGusDzMxqfAvELxbKw/640?wx_fmt=gif&wxfrom=5&wx_lazy=1&tp=webp\" _width=\"677px\" data-order=\"1\" alt=\"图片\" data-fail=\"0\" style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; vertical-align: bottom; height: auto !important; visibility: visible !important; width: 677px !important;\"/></p><p data-style=\"margin-bottom: 16px; color: rgb(51, 51, 51); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; font-size: 16px; letter-spacing: normal; text-align: start; text-wrap: wrap;\" class=\"js_darkmode__7\" style=\"-webkit-tap-highlight-color: transparent; margin-top: 0px; margin-bottom: 16px; padding: 0px; outline: 0px; max-width: 100%; color: rgb(51, 51, 51); clear: both; min-height: 1em; text-wrap: wrap; background-color: rgb(25, 25, 25); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; box-sizing: border-box !important; overflow-wrap: break-word !important;\">你可能想到直接设置滚动条样式就可以了，就像这样</p><pre tabindex=\"0\" data-style=\"font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-size-adjust: none; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-variant-position: normal; font-stretch: normal; font-size: 13.6px; line-height: 1.45; font-family: Consolas, \"Liberation Mono\", Menlo, Courier, monospace; margin-bottom: 16px; padding: 10px; overflow: auto; background: rgb(40, 44, 52); border-radius: 3px; overflow-wrap: normal; color: rgb(51, 51, 51); letter-spacing: normal; text-align: start;\" class=\"js_darkmode__8\" style=\"-webkit-tap-highlight-color: transparent; margin-top: 0px; margin-bottom: 16px; padding: 10px; outline: 0px; max-width: 100%; overflow-wrap: normal; background-color: rgb(40, 44, 52); color: rgb(51, 51, 51); font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-size-adjust: none; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-variant-position: normal; font-stretch: normal; font-size: 13.6px; line-height: 1.45; font-family: Consolas, \"Liberation Mono\", Menlo, Courier, monospace; overflow: auto; border-radius: 3px; box-sizing: border-box !important;\"><code style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: normal; font-family: Consolas, \"Liberation Mono\", Menlo, Courier, monospace; font-size: 12px; background-color: rgba(0, 0, 0, 0.04); border-radius: 5px; word-break: normal; border-width: 0px; border-style: initial; border-color: initial; overflow: auto; line-height: inherit; color: rgb(171, 178, 191);\"> <span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(215, 186, 125);\">::-webkit-scrollbar</span> <span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(212, 212, 212);\">{</span><br style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important;\"/> &nbsp; <span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(156, 220, 254);\">display</span><span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(212, 212, 212);\">:</span> none<span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(212, 212, 212);\">;</span><br style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important;\"/> <span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(212, 212, 212);\">}</span></code></pre><p data-style=\"margin-bottom: 16px; color: rgb(51, 51, 51); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; font-size: 16px; letter-spacing: normal; text-align: start; text-wrap: wrap;\" class=\"js_darkmode__9\" style=\"-webkit-tap-highlight-color: transparent; margin-top: 0px; margin-bottom: 16px; padding: 0px; outline: 0px; max-width: 100%; color: rgb(51, 51, 51); clear: both; min-height: 1em; text-wrap: wrap; background-color: rgb(25, 25, 25); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; box-sizing: border-box !important; overflow-wrap: break-word !important;\">目前来看好像没什么问题，但在某些版本的 iOS 上却无效（具体待测试），滚动条仍然出现。</p><p data-style=\"margin-bottom: 16px; color: rgb(51, 51, 51); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; font-size: 16px; letter-spacing: normal; text-align: start; text-wrap: wrap;\" class=\"js_darkmode__10\" style=\"-webkit-tap-highlight-color: transparent; margin-top: 0px; margin-bottom: 16px; padding: 0px; outline: 0px; max-width: 100%; color: rgb(51, 51, 51); clear: both; min-height: 1em; text-wrap: wrap; background-color: rgb(25, 25, 25); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; box-sizing: border-box !important; overflow-wrap: break-word !important;\">那有没有其他方式可以解决这个问题呢？下面介绍几个方法</p><p data-style=\"margin-bottom: 16px; color: rgb(51, 51, 51); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; font-size: 16px; letter-spacing: normal; text-align: start; text-wrap: wrap;\" class=\"js_darkmode__11\" style=\"-webkit-tap-highlight-color: transparent; margin-top: 0px; margin-bottom: 16px; padding: 0px; outline: 0px; max-width: 100%; color: rgb(51, 51, 51); clear: both; min-height: 1em; text-wrap: wrap; background-color: rgb(25, 25, 25); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; box-sizing: border-box !important; overflow-wrap: break-word !important;\"><a target=\"_blank\" href=\"http://mp.weixin.qq.com/s?__biz=MjM5MTA1MjAxMQ==&mid=2651238503&idx=1&sn=d0fc04379eb3079020fa462cddb7f539&chksm=bd4969e38a3ee0f5402c764f3a95162cfefc4cd2e4171f336dc7aa56c284f8c6c1de0bfacfbd&scene=21#wechat_redirect\" textvalue=\"【第2019期】JS纯前端实现audio音频剪裁剪切复制播放与上传\" linktype=\"text\" imgurl=\"\" imgdata=\"null\" data-itemshowtype=\"0\" tab=\"innerlink\" data-linktype=\"2\" hasload=\"1\" style=\"-webkit-tap-highlight-color: rgba(0, 0, 0, 0); margin: 0px; padding: 0px; outline: 0px; text-decoration-line: none; -webkit-user-drag: none; cursor: default; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important;\">【第2019期】JS纯前端实现audio音频剪裁剪切复制播放与上传</a><br style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important;\"/></p><h4 data-edit=\"早书编辑器\" data-style=\"margin-top: 24px; margin-bottom: 16px; font-size: 18px; font-weight: 600; line-height: 1.25; color: rgb(51, 51, 51); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; letter-spacing: normal; text-align: start; text-wrap: wrap;\" class=\"js_darkmode__12\" style=\"-webkit-tap-highlight-color: transparent; margin: 24px 0px 16px; padding: 0px; outline: 0px; font-size: 18px; max-width: 100%; color: rgb(51, 51, 51); text-wrap: wrap; background-color: rgb(25, 25, 25); line-height: 1.25; font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; box-sizing: border-box !important; overflow-wrap: break-word !important;\">一、通过 overflow 隐藏</h4><p data-style=\"margin-bottom: 16px; color: rgb(51, 51, 51); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; font-size: 16px; letter-spacing: normal; text-align: start; text-wrap: wrap;\" class=\"js_darkmode__13\" style=\"-webkit-tap-highlight-color: transparent; margin-top: 0px; margin-bottom: 16px; padding: 0px; outline: 0px; max-width: 100%; color: rgb(51, 51, 51); clear: both; min-height: 1em; text-wrap: wrap; background-color: rgb(25, 25, 25); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; box-sizing: border-box !important; overflow-wrap: break-word !important;\">既然有时候修改滚动条样式无法解决，我们可以想办法把它隐藏。</p><p data-style=\"margin-bottom: 16px; color: rgb(51, 51, 51); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; font-size: 16px; letter-spacing: normal; text-align: start; text-wrap: wrap;\" class=\"js_darkmode__14\" style=\"-webkit-tap-highlight-color: transparent; margin-top: 0px; margin-bottom: 16px; padding: 0px; outline: 0px; max-width: 100%; color: rgb(51, 51, 51); clear: both; min-height: 1em; text-wrap: wrap; background-color: rgb(25, 25, 25); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; box-sizing: border-box !important; overflow-wrap: break-word !important;\">下面是一个横向滚动列表</p><pre tabindex=\"0\" data-style=\"font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-size-adjust: none; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-variant-position: normal; font-stretch: normal; font-size: 13.6px; line-height: 1.45; font-family: Consolas, \"Liberation Mono\", Menlo, Courier, monospace; margin-bottom: 16px; padding: 10px; overflow: auto; background: rgb(40, 44, 52); border-radius: 3px; overflow-wrap: normal; color: rgb(51, 51, 51); letter-spacing: normal; text-align: start;\" class=\"js_darkmode__15\" style=\"-webkit-tap-highlight-color: transparent; margin-top: 0px; margin-bottom: 16px; padding: 10px; outline: 0px; max-width: 100%; overflow-wrap: normal; background-color: rgb(40, 44, 52); color: rgb(51, 51, 51); font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-size-adjust: none; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-variant-position: normal; font-stretch: normal; font-size: 13.6px; line-height: 1.45; font-family: Consolas, \"Liberation Mono\", Menlo, Courier, monospace; overflow: auto; border-radius: 3px; box-sizing: border-box !important;\"><code style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: normal; font-family: Consolas, \"Liberation Mono\", Menlo, Courier, monospace; font-size: 12px; background-color: rgba(0, 0, 0, 0.04); border-radius: 5px; word-break: normal; border-width: 0px; border-style: initial; border-color: initial; overflow: auto; line-height: inherit; color: rgb(171, 178, 191);\"> <span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(86, 156, 214);\"><span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(128, 128, 128);\">&lt;</span>div <span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(156, 220, 254);\">class</span><span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(206, 145, 120);\"><span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(212, 212, 212);\">=</span>&quot;list&quot;</span><span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(128, 128, 128);\">&gt;</span></span><br style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important;\"/> &nbsp; <span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(86, 156, 214);\"><span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(128, 128, 128);\">&lt;</span>div <span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(156, 220, 254);\">class</span><span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(206, 145, 120);\"><span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(212, 212, 212);\">=</span>&quot;item&quot;</span><span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(128, 128, 128);\">&gt;</span><span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(128, 128, 128);\">&lt;/</span>div<span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(128, 128, 128);\">&gt;</span></span><br style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important;\"/> &nbsp; <span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(86, 156, 214);\"><span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(128, 128, 128);\">&lt;</span>div <span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(156, 220, 254);\">class</span><span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(206, 145, 120);\"><span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(212, 212, 212);\">=</span>&quot;item&quot;</span><span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(128, 128, 128);\">&gt;</span><span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(128, 128, 128);\">&lt;/</span>div<span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(128, 128, 128);\">&gt;</span></span><br style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important;\"/> &nbsp; <span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(86, 156, 214);\"><span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(128, 128, 128);\">&lt;</span>div <span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(156, 220, 254);\">class</span><span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(206, 145, 120);\"><span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(212, 212, 212);\">=</span>&quot;item&quot;</span><span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(128, 128, 128);\">&gt;</span><span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(128, 128, 128);\">&lt;/</span>div<span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(128, 128, 128);\">&gt;</span></span><br style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important;\"/> &nbsp; <span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(86, 156, 214);\"><span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(128, 128, 128);\">&lt;</span>div <span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(156, 220, 254);\">class</span><span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(206, 145, 120);\"><span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(212, 212, 212);\">=</span>&quot;item&quot;</span><span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(128, 128, 128);\">&gt;</span><span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(128, 128, 128);\">&lt;/</span>div<span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(128, 128, 128);\">&gt;</span></span><br style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important;\"/> &nbsp; <span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(86, 156, 214);\"><span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(128, 128, 128);\">&lt;</span>div <span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(156, 220, 254);\">class</span><span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(206, 145, 120);\"><span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(212, 212, 212);\">=</span>&quot;item&quot;</span><span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(128, 128, 128);\">&gt;</span><span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(128, 128, 128);\">&lt;/</span>div<span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(128, 128, 128);\">&gt;</span></span><br style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important;\"/> &nbsp; <span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(86, 156, 214);\"><span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(128, 128, 128);\">&lt;</span>div <span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(156, 220, 254);\">class</span><span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(206, 145, 120);\"><span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(212, 212, 212);\">=</span>&quot;item&quot;</span><span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(128, 128, 128);\">&gt;</span><span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(128, 128, 128);\">&lt;/</span>div<span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(128, 128, 128);\">&gt;</span></span><br style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important;\"/> &nbsp; <span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(86, 156, 214);\"><span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(128, 128, 128);\">&lt;</span>div <span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(156, 220, 254);\">class</span><span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(206, 145, 120);\"><span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(212, 212, 212);\">=</span>&quot;item&quot;</span><span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(128, 128, 128);\">&gt;</span><span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(128, 128, 128);\">&lt;/</span>div<span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(128, 128, 128);\">&gt;</span></span><br style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important;\"/> <span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(86, 156, 214);\"><span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(128, 128, 128);\">&lt;/</span>div<span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(128, 128, 128);\">&gt;</span></span></code></pre><p data-style=\"margin-bottom: 16px; color: rgb(51, 51, 51); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; font-size: 16px; letter-spacing: normal; text-align: start; text-wrap: wrap;\" class=\"js_darkmode__16\" style=\"-webkit-tap-highlight-color: transparent; margin-top: 0px; margin-bottom: 16px; padding: 0px; outline: 0px; max-width: 100%; color: rgb(51, 51, 51); clear: both; min-height: 1em; text-wrap: wrap; background-color: rgb(25, 25, 25); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; box-sizing: border-box !important; overflow-wrap: break-word !important;\">简单修饰一下，让这个列表可以横向滚动</p><pre tabindex=\"0\" data-style=\"font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-size-adjust: none; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-variant-position: normal; font-stretch: normal; font-size: 13.6px; line-height: 1.45; font-family: Consolas, \"Liberation Mono\", Menlo, Courier, monospace; margin-bottom: 16px; padding: 10px; overflow: auto; background: rgb(40, 44, 52); border-radius: 3px; overflow-wrap: normal; color: rgb(51, 51, 51); letter-spacing: normal; text-align: start;\" class=\"js_darkmode__17\" style=\"-webkit-tap-highlight-color: transparent; margin-top: 0px; margin-bottom: 16px; padding: 10px; outline: 0px; max-width: 100%; overflow-wrap: normal; background-color: rgb(40, 44, 52); color: rgb(51, 51, 51); font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-size-adjust: none; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-variant-position: normal; font-stretch: normal; font-size: 13.6px; line-height: 1.45; font-family: Consolas, \"Liberation Mono\", Menlo, Courier, monospace; overflow: auto; border-radius: 3px; box-sizing: border-box !important;\"><code style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: normal; font-family: Consolas, \"Liberation Mono\", Menlo, Courier, monospace; font-size: 12px; background-color: rgba(0, 0, 0, 0.04); border-radius: 5px; word-break: normal; border-width: 0px; border-style: initial; border-color: initial; overflow: auto; line-height: inherit; color: rgb(171, 178, 191);\"> <span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(215, 186, 125);\">.list</span><span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(212, 212, 212);\">{</span><br style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important;\"/> &nbsp; <span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(156, 220, 254);\">display</span><span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(212, 212, 212);\">:</span> flex<span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(212, 212, 212);\">;</span><br style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important;\"/> &nbsp; <span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(156, 220, 254);\">overflow</span><span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(212, 212, 212);\">:</span> auto<span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(212, 212, 212);\">;</span><br style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important;\"/> &nbsp; <span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(156, 220, 254);\">gap</span><span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(212, 212, 212);\">:</span> 10px<span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(212, 212, 212);\">;</span><br style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important;\"/> &nbsp; <span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(156, 220, 254);\">padding</span><span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(212, 212, 212);\">:</span> 10px<span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(212, 212, 212);\">;</span><br style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important;\"/> <span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(212, 212, 212);\">}</span><br style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important;\"/> <span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(215, 186, 125);\">.item</span><span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(212, 212, 212);\">{</span><br style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important;\"/> &nbsp; <span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(156, 220, 254);\">width</span><span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(212, 212, 212);\">:</span> 100px<span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(212, 212, 212);\">;</span><br style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important;\"/> &nbsp; <span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(156, 220, 254);\">height</span><span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(212, 212, 212);\">:</span> 100px<span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(212, 212, 212);\">;</span><br style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important;\"/> &nbsp; <span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(156, 220, 254);\">background</span><span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(212, 212, 212);\">:</span> royalblue<span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(212, 212, 212);\">;</span><br style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important;\"/> &nbsp; <span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(156, 220, 254);\">border-radius</span><span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(212, 212, 212);\">:</span> 8px<span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(212, 212, 212);\">;</span><br style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important;\"/> &nbsp; <span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(156, 220, 254);\">flex-shrink</span><span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(212, 212, 212);\">:</span> 0<span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(212, 212, 212);\">;</span><br style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important;\"/> <span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(212, 212, 212);\">}</span></code></pre><p data-style=\"margin-bottom: 16px; color: rgb(51, 51, 51); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; font-size: 16px; letter-spacing: normal; text-align: start; text-wrap: wrap;\" class=\"js_darkmode__18\" style=\"-webkit-tap-highlight-color: transparent; margin-top: 0px; margin-bottom: 16px; padding: 0px; outline: 0px; max-width: 100%; color: rgb(51, 51, 51); clear: both; min-height: 1em; text-wrap: wrap; background-color: rgb(25, 25, 25); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; box-sizing: border-box !important; overflow-wrap: break-word !important;\">效果如下</p><p data-style=\"margin-bottom: 16px; color: rgb(51, 51, 51); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; font-size: 16px; letter-spacing: normal; text-align: start; text-wrap: wrap;\" class=\"js_darkmode__19\" style=\"-webkit-tap-highlight-color: transparent; margin-top: 0px; margin-bottom: 16px; padding: 0px; outline: 0px; max-width: 100%; color: rgb(51, 51, 51); clear: both; min-height: 1em; text-wrap: wrap; background-color: rgb(25, 25, 25); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; box-sizing: border-box !important; overflow-wrap: break-word !important;\"><img class=\"rich_pages wxw-img\" data-imgfileid=\"503788965\" data-ratio=\"0.41574074074074074\" data-src=\"https://tradecms.dragontrail.com/storage/202408/22/9tbluNkMFnY9Tq6LjXQ2kSVdoIjWGWsm.png\" data-type=\"png\" data-w=\"1080\" data-original-style=\"border-style: none;display: block;margin-right: auto;margin-bottom: 16px;margin-left: auto;\" data-index=\"3\" src=\"https://mmbiz.qpic.cn/sz_mmbiz_png/meG6Vo0MevjIdpveQCprgqjIwjY9ZAvOV3obaRsPTNWVKAps0Z8notZLlK7sYggCVCicxfQpiavskD3uvrmgA0icQ/640?wx_fmt=png&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1\" _width=\"677px\" crossorigin=\"anonymous\" alt=\"图片\" data-fail=\"0\" style=\"-webkit-tap-highlight-color: transparent; margin: 0px auto 16px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; vertical-align: bottom; height: auto !important; border-style: none; display: block; visibility: visible !important; width: 677px !important;\"/></p><p data-style=\"margin-bottom: 16px; color: rgb(51, 51, 51); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; font-size: 16px; letter-spacing: normal; text-align: start; text-wrap: wrap;\" class=\"js_darkmode__20\" style=\"-webkit-tap-highlight-color: transparent; margin-top: 0px; margin-bottom: 16px; padding: 0px; outline: 0px; max-width: 100%; color: rgb(51, 51, 51); clear: both; min-height: 1em; text-wrap: wrap; background-color: rgb(25, 25, 25); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; box-sizing: border-box !important; overflow-wrap: break-word !important;\">通过 overflow 隐藏的方式很简单，我们需要一个父级</p><pre tabindex=\"0\" data-style=\"font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-size-adjust: none; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-variant-position: normal; font-stretch: normal; font-size: 13.6px; line-height: 1.45; font-family: Consolas, \"Liberation Mono\", Menlo, Courier, monospace; margin-bottom: 16px; padding: 10px; overflow: auto; background: rgb(40, 44, 52); border-radius: 3px; overflow-wrap: normal; color: rgb(51, 51, 51); letter-spacing: normal; text-align: start;\" class=\"js_darkmode__21\" style=\"-webkit-tap-highlight-color: transparent; margin-top: 0px; margin-bottom: 16px; padding: 10px; outline: 0px; max-width: 100%; overflow-wrap: normal; background-color: rgb(40, 44, 52); color: rgb(51, 51, 51); font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-size-adjust: none; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-variant-position: normal; font-stretch: normal; font-size: 13.6px; line-height: 1.45; font-family: Consolas, \"Liberation Mono\", Menlo, Courier, monospace; overflow: auto; border-radius: 3px; box-sizing: border-box !important;\"><code style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: normal; font-family: Consolas, \"Liberation Mono\", Menlo, Courier, monospace; font-size: 12px; background-color: rgba(0, 0, 0, 0.04); border-radius: 5px; word-break: normal; border-width: 0px; border-style: initial; border-color: initial; overflow: auto; line-height: inherit; color: rgb(171, 178, 191);\"> <span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(86, 156, 214);\"><span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(128, 128, 128);\">&lt;</span>div <span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(156, 220, 254);\">class</span><span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(206, 145, 120);\"><span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(212, 212, 212);\">=</span>&quot;wrap&quot;</span><span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(128, 128, 128);\">&gt;</span></span><br style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important;\"/> &nbsp; <span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(86, 156, 214);\"><span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(128, 128, 128);\">&lt;</span>div <span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(156, 220, 254);\">class</span><span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(206, 145, 120);\"><span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(212, 212, 212);\">=</span>&quot;list&quot;</span><span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(128, 128, 128);\">&gt;</span></span><br style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important;\"/><br style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important;\"/> &nbsp; <span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(86, 156, 214);\"><span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(128, 128, 128);\">&lt;/</span>div<span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(128, 128, 128);\">&gt;</span></span><br style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important;\"/> <span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(86, 156, 214);\"><span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(128, 128, 128);\">&lt;/</span>div<span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(128, 128, 128);\">&gt;</span></span></code></pre><p data-style=\"margin-bottom: 16px; color: rgb(51, 51, 51); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; font-size: 16px; letter-spacing: normal; text-align: start; text-wrap: wrap;\" class=\"js_darkmode__22\" style=\"-webkit-tap-highlight-color: transparent; margin-top: 0px; margin-bottom: 16px; padding: 0px; outline: 0px; max-width: 100%; color: rgb(51, 51, 51); clear: both; min-height: 1em; text-wrap: wrap; background-color: rgb(25, 25, 25); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; box-sizing: border-box !important; overflow-wrap: break-word !important;\">然后，将列表底部 padding 设置的稍微大一些，比如</p><pre tabindex=\"0\" data-style=\"font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-size-adjust: none; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-variant-position: normal; font-stretch: normal; font-size: 13.6px; line-height: 1.45; font-family: Consolas, \"Liberation Mono\", Menlo, Courier, monospace; margin-bottom: 16px; padding: 10px; overflow: auto; background: rgb(40, 44, 52); border-radius: 3px; overflow-wrap: normal; color: rgb(51, 51, 51); letter-spacing: normal; text-align: start;\" class=\"js_darkmode__23\" style=\"-webkit-tap-highlight-color: transparent; margin-top: 0px; margin-bottom: 16px; padding: 10px; outline: 0px; max-width: 100%; overflow-wrap: normal; background-color: rgb(40, 44, 52); color: rgb(51, 51, 51); font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-size-adjust: none; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-variant-position: normal; font-stretch: normal; font-size: 13.6px; line-height: 1.45; font-family: Consolas, \"Liberation Mono\", Menlo, Courier, monospace; overflow: auto; border-radius: 3px; box-sizing: border-box !important;\"><code style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: normal; font-family: Consolas, \"Liberation Mono\", Menlo, Courier, monospace; font-size: 12px; background-color: rgba(0, 0, 0, 0.04); border-radius: 5px; word-break: normal; border-width: 0px; border-style: initial; border-color: initial; overflow: auto; line-height: inherit; color: rgb(171, 178, 191);\"> <span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(215, 186, 125);\">.list</span><span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(212, 212, 212);\">{</span><br style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important;\"/> &nbsp; <span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(106, 153, 85);\">/**/</span><br style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important;\"/> &nbsp; <span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(156, 220, 254);\">padding-bottom</span><span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(212, 212, 212);\">:</span> 20px<span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(212, 212, 212);\">;</span><br style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important;\"/> <span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(212, 212, 212);\">}</span></code></pre><p data-style=\"margin-bottom: 16px; color: rgb(51, 51, 51); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; font-size: 16px; letter-spacing: normal; text-align: start; text-wrap: wrap;\" class=\"js_darkmode__24\" style=\"-webkit-tap-highlight-color: transparent; margin-top: 0px; margin-bottom: 16px; padding: 0px; outline: 0px; max-width: 100%; color: rgb(51, 51, 51); clear: both; min-height: 1em; text-wrap: wrap; background-color: rgb(25, 25, 25); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; box-sizing: border-box !important; overflow-wrap: break-word !important;\">可以看到列表下方的距离变大了，滚动条也更靠下了，效果如下</p><p data-style=\"margin-bottom: 16px; color: rgb(51, 51, 51); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; font-size: 16px; letter-spacing: normal; text-align: start; text-wrap: wrap;\" class=\"js_darkmode__25\" style=\"-webkit-tap-highlight-color: transparent; margin-top: 0px; margin-bottom: 16px; padding: 0px; outline: 0px; max-width: 100%; color: rgb(51, 51, 51); clear: both; min-height: 1em; text-wrap: wrap; background-color: rgb(25, 25, 25); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; box-sizing: border-box !important; overflow-wrap: break-word !important;\"><img class=\"rich_pages wxw-img\" data-imgfileid=\"503788963\" data-ratio=\"0.4166666666666667\" data-src=\"https://tradecms.dragontrail.com/storage/202408/22/kjSsqGlAUt6gpocVZefLEUY3ggarva5A.png\" data-type=\"png\" data-w=\"1080\" data-original-style=\"border-style: none;display: block;margin-right: auto;margin-bottom: 16px;margin-left: auto;\" data-index=\"4\" src=\"https://mmbiz.qpic.cn/sz_mmbiz_png/meG6Vo0MevjIdpveQCprgqjIwjY9ZAvOQfFGibLJicgGFMz9J9BdiaGYfW0tklRKiaT2evMN1xYPMUhJPI5mhFM8dQ/640?wx_fmt=png&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1\" _width=\"677px\" crossorigin=\"anonymous\" alt=\"图片\" data-fail=\"0\" style=\"-webkit-tap-highlight-color: transparent; margin: 0px auto 16px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; vertical-align: bottom; height: auto !important; border-style: none; display: block; visibility: visible !important; width: 677px !important;\"/></p><p data-style=\"margin-bottom: 16px; color: rgb(51, 51, 51); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; font-size: 16px; letter-spacing: normal; text-align: start; text-wrap: wrap;\" class=\"js_darkmode__26\" style=\"-webkit-tap-highlight-color: transparent; margin-top: 0px; margin-bottom: 16px; padding: 0px; outline: 0px; max-width: 100%; color: rgb(51, 51, 51); clear: both; min-height: 1em; text-wrap: wrap; background-color: rgb(25, 25, 25); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; box-sizing: border-box !important; overflow-wrap: break-word !important;\">如何让整体尺寸仍然保持原有呢？答案是借助负 margin，比如之前底部 padding 是 10，现在改成了 20，所以需要 - 10 的 margin</p><pre tabindex=\"0\" data-style=\"font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-size-adjust: none; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-variant-position: normal; font-stretch: normal; font-size: 13.6px; line-height: 1.45; font-family: Consolas, \"Liberation Mono\", Menlo, Courier, monospace; margin-bottom: 16px; padding: 10px; overflow: auto; background: rgb(40, 44, 52); border-radius: 3px; overflow-wrap: normal; color: rgb(51, 51, 51); letter-spacing: normal; text-align: start;\" class=\"js_darkmode__27\" style=\"-webkit-tap-highlight-color: transparent; margin-top: 0px; margin-bottom: 16px; padding: 10px; outline: 0px; max-width: 100%; overflow-wrap: normal; background-color: rgb(40, 44, 52); color: rgb(51, 51, 51); font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-size-adjust: none; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-variant-position: normal; font-stretch: normal; font-size: 13.6px; line-height: 1.45; font-family: Consolas, \"Liberation Mono\", Menlo, Courier, monospace; overflow: auto; border-radius: 3px; box-sizing: border-box !important;\"><code style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: normal; font-family: Consolas, \"Liberation Mono\", Menlo, Courier, monospace; font-size: 12px; background-color: rgba(0, 0, 0, 0.04); border-radius: 5px; word-break: normal; border-width: 0px; border-style: initial; border-color: initial; overflow: auto; line-height: inherit; color: rgb(171, 178, 191);\"> <span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(215, 186, 125);\">.list</span><span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(212, 212, 212);\">{</span><br style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important;\"/> &nbsp; <span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(106, 153, 85);\">/**/</span><br style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important;\"/> &nbsp; <span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(156, 220, 254);\">margin-bottom</span><span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(212, 212, 212);\">:</span> -10px<span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(212, 212, 212);\">;</span><br style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important;\"/> <span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(212, 212, 212);\">}</span></code></pre><p data-style=\"margin-bottom: 16px; color: rgb(51, 51, 51); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; font-size: 16px; letter-spacing: normal; text-align: start; text-wrap: wrap;\" class=\"js_darkmode__28\" style=\"-webkit-tap-highlight-color: transparent; margin-top: 0px; margin-bottom: 16px; padding: 0px; outline: 0px; max-width: 100%; color: rgb(51, 51, 51); clear: both; min-height: 1em; text-wrap: wrap; background-color: rgb(25, 25, 25); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; box-sizing: border-box !important; overflow-wrap: break-word !important;\">这样整体尺寸就正常了，不过滚动条仍然是可见的，只是出去了</p><p data-style=\"margin-bottom: 16px; color: rgb(51, 51, 51); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; font-size: 16px; letter-spacing: normal; text-align: start; text-wrap: wrap;\" class=\"js_darkmode__29\" style=\"-webkit-tap-highlight-color: transparent; margin-top: 0px; margin-bottom: 16px; padding: 0px; outline: 0px; max-width: 100%; color: rgb(51, 51, 51); clear: both; min-height: 1em; text-wrap: wrap; background-color: rgb(25, 25, 25); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; box-sizing: border-box !important; overflow-wrap: break-word !important;\"><img class=\"rich_pages wxw-img\" data-imgfileid=\"503788964\" data-ratio=\"0.41574074074074074\" data-src=\"https://tradecms.dragontrail.com/storage/202408/22/vWbs7hJmiPmBZkbLOByiD9dKfM6Vpojd.png\" data-type=\"png\" data-w=\"1080\" data-original-style=\"border-style: none;display: block;margin-right: auto;margin-bottom: 16px;margin-left: auto;\" data-index=\"5\" src=\"https://mmbiz.qpic.cn/sz_mmbiz_png/meG6Vo0MevjIdpveQCprgqjIwjY9ZAvOX9W7HrnQAsBT3wNeFtkNiaOUAV2Pfu3iaWXsXiaSLlkABcR8icoLkzwWyw/640?wx_fmt=png&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1\" _width=\"677px\" crossorigin=\"anonymous\" alt=\"图片\" data-fail=\"0\" style=\"-webkit-tap-highlight-color: transparent; margin: 0px auto 16px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; vertical-align: bottom; height: auto !important; border-style: none; display: block; visibility: visible !important; width: 677px !important;\"/></p><p data-style=\"margin-bottom: 16px; color: rgb(51, 51, 51); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; font-size: 16px; letter-spacing: normal; text-align: start; text-wrap: wrap;\" class=\"js_darkmode__30\" style=\"-webkit-tap-highlight-color: transparent; margin-top: 0px; margin-bottom: 16px; padding: 0px; outline: 0px; max-width: 100%; color: rgb(51, 51, 51); clear: both; min-height: 1em; text-wrap: wrap; background-color: rgb(25, 25, 25); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; box-sizing: border-box !important; overflow-wrap: break-word !important;\">最后只需要设置父级的 overflow 为隐藏就可以了</p><pre tabindex=\"0\" data-style=\"font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-size-adjust: none; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-variant-position: normal; font-stretch: normal; font-size: 13.6px; line-height: 1.45; font-family: Consolas, \"Liberation Mono\", Menlo, Courier, monospace; margin-bottom: 16px; padding: 10px; overflow: auto; background: rgb(40, 44, 52); border-radius: 3px; overflow-wrap: normal; color: rgb(51, 51, 51); letter-spacing: normal; text-align: start;\" class=\"js_darkmode__31\" style=\"-webkit-tap-highlight-color: transparent; margin-top: 0px; margin-bottom: 16px; padding: 10px; outline: 0px; max-width: 100%; overflow-wrap: normal; background-color: rgb(40, 44, 52); color: rgb(51, 51, 51); font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-size-adjust: none; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-variant-position: normal; font-stretch: normal; font-size: 13.6px; line-height: 1.45; font-family: Consolas, \"Liberation Mono\", Menlo, Courier, monospace; overflow: auto; border-radius: 3px; box-sizing: border-box !important;\"><code style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: normal; font-family: Consolas, \"Liberation Mono\", Menlo, Courier, monospace; font-size: 12px; background-color: rgba(0, 0, 0, 0.04); border-radius: 5px; word-break: normal; border-width: 0px; border-style: initial; border-color: initial; overflow: auto; line-height: inherit; color: rgb(171, 178, 191);\"> <span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(215, 186, 125);\">.wrap</span><span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(212, 212, 212);\">{</span><br style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important;\"/> &nbsp; <span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(106, 153, 85);\">/**/</span><br style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important;\"/> &nbsp; <span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(156, 220, 254);\">overflow</span><span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(212, 212, 212);\">:</span> hidden<span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(212, 212, 212);\">;</span><br style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important;\"/> <span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(212, 212, 212);\">}</span></code></pre><p data-style=\"margin-bottom: 16px; color: rgb(51, 51, 51); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; font-size: 16px; letter-spacing: normal; text-align: start; text-wrap: wrap;\" class=\"js_darkmode__32\" style=\"-webkit-tap-highlight-color: transparent; margin-top: 0px; margin-bottom: 16px; padding: 0px; outline: 0px; max-width: 100%; color: rgb(51, 51, 51); clear: both; min-height: 1em; text-wrap: wrap; background-color: rgb(25, 25, 25); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; box-sizing: border-box !important; overflow-wrap: break-word !important;\">原理示意如下</p><p data-style=\"margin-bottom: 16px; color: rgb(51, 51, 51); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; font-size: 16px; letter-spacing: normal; text-align: start; text-wrap: wrap;\" class=\"js_darkmode__33\" style=\"-webkit-tap-highlight-color: transparent; margin-top: 0px; margin-bottom: 16px; padding: 0px; outline: 0px; max-width: 100%; color: rgb(51, 51, 51); clear: both; min-height: 1em; text-wrap: wrap; background-color: rgb(25, 25, 25); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; box-sizing: border-box !important; overflow-wrap: break-word !important;\"><img class=\"rich_pages wxw-img\" data-imgfileid=\"503788978\" data-ratio=\"0.6481481481481481\" data-src=\"https://tradecms.dragontrail.com/storage/202408/22/Da5bySZXKuBcK5jcOfqRg2HFCfgzkdFm.png\" data-type=\"png\" data-w=\"1080\" data-original-style=\"null\" data-index=\"6\" src=\"https://mmbiz.qpic.cn/sz_mmbiz_png/meG6Vo0MevjIdpveQCprgqjIwjY9ZAvOJeMZuxmDAicHiacIGh9f6vMwGG2pgjr1gXKhvYdqa9tNuW3DAolG5a4g/640?wx_fmt=png&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1\" _width=\"677px\" crossorigin=\"anonymous\" alt=\"图片\" data-fail=\"0\" style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; vertical-align: bottom; height: auto !important; visibility: visible !important; width: 677px !important;\"/></p><p data-style=\"margin-bottom: 16px; color: rgb(51, 51, 51); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; font-size: 16px; letter-spacing: normal; text-align: start; text-wrap: wrap;\" class=\"js_darkmode__34\" style=\"-webkit-tap-highlight-color: transparent; margin-top: 0px; margin-bottom: 16px; padding: 0px; outline: 0px; max-width: 100%; color: rgb(51, 51, 51); clear: both; min-height: 1em; text-wrap: wrap; background-color: rgb(25, 25, 25); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; box-sizing: border-box !important; overflow-wrap: break-word !important;\">这样就完美隐藏了滚动条</p><p data-style=\"margin-bottom: 16px; color: rgb(51, 51, 51); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; font-size: 16px; letter-spacing: normal; text-align: start; text-wrap: wrap;\" class=\"js_darkmode__35\" style=\"-webkit-tap-highlight-color: transparent; margin-top: 0px; margin-bottom: 16px; padding: 0px; outline: 0px; max-width: 100%; color: rgb(51, 51, 51); clear: both; min-height: 1em; text-wrap: wrap; background-color: rgb(25, 25, 25); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; box-sizing: border-box !important; overflow-wrap: break-word !important;\"><img class=\"rich_pages wxw-img\" data-imgfileid=\"503788979\" data-ratio=\"0.41574074074074074\" data-src=\"https://tradecms.dragontrail.com/storage/202408/22/AudRBi7CpkQRKmD3Z4iNQqrmRyveBvqt.png\" data-type=\"png\" data-w=\"1080\" data-original-style=\"null\" data-index=\"7\" src=\"https://mmbiz.qpic.cn/sz_mmbiz_png/meG6Vo0MevjIdpveQCprgqjIwjY9ZAvOKjf8N11mnHbFbBAPFczWz2p2zPR5vJQIkCJb5jJBZkicTFAcUCibXziaw/640?wx_fmt=png&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1\" _width=\"677px\" crossorigin=\"anonymous\" alt=\"图片\" data-fail=\"0\" style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; vertical-align: bottom; height: auto !important; visibility: visible !important; width: 677px !important;\"/></p><p data-style=\"margin-bottom: 16px; color: rgb(51, 51, 51); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; font-size: 16px; letter-spacing: normal; text-align: start; text-wrap: wrap;\" class=\"js_darkmode__36\" style=\"-webkit-tap-highlight-color: transparent; margin-top: 0px; margin-bottom: 16px; padding: 0px; outline: 0px; max-width: 100%; color: rgb(51, 51, 51); clear: both; min-height: 1em; text-wrap: wrap; background-color: rgb(25, 25, 25); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; box-sizing: border-box !important; overflow-wrap: break-word !important;\">当然，不仅仅是 overflow，下面这种方式也可以实现超出隐藏</p><pre tabindex=\"0\" data-style=\"font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-size-adjust: none; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-variant-position: normal; font-stretch: normal; font-size: 13.6px; line-height: 1.45; font-family: Consolas, \"Liberation Mono\", Menlo, Courier, monospace; margin-bottom: 16px; padding: 10px; overflow: auto; background: rgb(40, 44, 52); border-radius: 3px; overflow-wrap: normal; color: rgb(51, 51, 51); letter-spacing: normal; text-align: start;\" class=\"js_darkmode__37\" style=\"-webkit-tap-highlight-color: transparent; margin-top: 0px; margin-bottom: 16px; padding: 10px; outline: 0px; max-width: 100%; overflow-wrap: normal; background-color: rgb(40, 44, 52); color: rgb(51, 51, 51); font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-size-adjust: none; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-variant-position: normal; font-stretch: normal; font-size: 13.6px; line-height: 1.45; font-family: Consolas, \"Liberation Mono\", Menlo, Courier, monospace; overflow: auto; border-radius: 3px; box-sizing: border-box !important;\"><code style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: normal; font-family: Consolas, \"Liberation Mono\", Menlo, Courier, monospace; font-size: 12px; background-color: rgba(0, 0, 0, 0.04); border-radius: 5px; word-break: normal; border-width: 0px; border-style: initial; border-color: initial; overflow: auto; line-height: inherit; color: rgb(171, 178, 191);\"> <span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(215, 186, 125);\">.wrap</span><span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(212, 212, 212);\">{</span><br style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important;\"/> &nbsp; <span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(106, 153, 85);\">/**/</span><br style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important;\"/> &nbsp; <span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(156, 220, 254);\">contain</span><span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(212, 212, 212);\">:</span> paint<span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(212, 212, 212);\">;</span><br style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important;\"/> <span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(212, 212, 212);\">}</span></code></pre><p data-style=\"margin-bottom: 16px; color: rgb(51, 51, 51); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; font-size: 16px; letter-spacing: normal; text-align: start; text-wrap: wrap;\" class=\"js_darkmode__38\" style=\"-webkit-tap-highlight-color: transparent; margin-top: 0px; margin-bottom: 16px; padding: 0px; outline: 0px; max-width: 100%; color: rgb(51, 51, 51); clear: both; min-height: 1em; text-wrap: wrap; background-color: rgb(25, 25, 25); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; box-sizing: border-box !important; overflow-wrap: break-word !important;\">这个属性比较新，可以控制元素在容器内的绘制规则，了解一下即可:https://developer.mozilla.org/zh-CN/docs/Web/CSS/contain</p><p data-style=\"margin-bottom: 16px; color: rgb(51, 51, 51); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; font-size: 16px; letter-spacing: normal; text-align: start; text-wrap: wrap;\" class=\"js_darkmode__39\" style=\"-webkit-tap-highlight-color: transparent; margin-top: 0px; margin-bottom: 16px; padding: 0px; outline: 0px; max-width: 100%; color: rgb(51, 51, 51); clear: both; min-height: 1em; text-wrap: wrap; background-color: rgb(25, 25, 25); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; box-sizing: border-box !important; overflow-wrap: break-word !important;\"><a target=\"_blank\" href=\"http://mp.weixin.qq.com/s?__biz=MjM5MTA1MjAxMQ==&mid=2651272622&idx=2&sn=de7edd2392ca3ddc44964f9765602f51&chksm=bd48ec2a8a3f653c1d6d6de74b599cab633138dba9a45e3b5fa55cc903a744ba3a6299145e8f&scene=21#wechat_redirect\" textvalue=\"【早阅】CSS contain 属性\" linktype=\"text\" imgurl=\"\" imgdata=\"null\" data-itemshowtype=\"0\" tab=\"innerlink\" data-linktype=\"2\" hasload=\"1\" style=\"-webkit-tap-highlight-color: rgba(0, 0, 0, 0); margin: 0px; padding: 0px; outline: 0px; text-decoration-line: none; -webkit-user-drag: none; cursor: default; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important;\">【早阅】CSS contain 属性</a><br style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important;\"/></p><h4 data-edit=\"早书编辑器\" data-style=\"margin-top: 24px; margin-bottom: 16px; font-size: 18px; font-weight: 600; line-height: 1.25; color: rgb(51, 51, 51); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; letter-spacing: normal; text-align: start; text-wrap: wrap;\" class=\"js_darkmode__40\" style=\"-webkit-tap-highlight-color: transparent; margin: 24px 0px 16px; padding: 0px; outline: 0px; font-size: 18px; max-width: 100%; color: rgb(51, 51, 51); text-wrap: wrap; background-color: rgb(25, 25, 25); line-height: 1.25; font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; box-sizing: border-box !important; overflow-wrap: break-word !important;\">二、通过 clip 裁剪</h4><p data-style=\"margin-bottom: 16px; color: rgb(51, 51, 51); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; font-size: 16px; letter-spacing: normal; text-align: start; text-wrap: wrap;\" class=\"js_darkmode__41\" style=\"-webkit-tap-highlight-color: transparent; margin-top: 0px; margin-bottom: 16px; padding: 0px; outline: 0px; max-width: 100%; color: rgb(51, 51, 51); clear: both; min-height: 1em; text-wrap: wrap; background-color: rgb(25, 25, 25); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; box-sizing: border-box !important; overflow-wrap: break-word !important;\">第一种方式需要借助父级的超出隐藏，需要额外一层，好像有点麻烦，有没有办法自身也可以裁剪呢？</p><p data-style=\"margin-bottom: 16px; color: rgb(51, 51, 51); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; font-size: 16px; letter-spacing: normal; text-align: start; text-wrap: wrap;\" class=\"js_darkmode__42\" style=\"-webkit-tap-highlight-color: transparent; margin-top: 0px; margin-bottom: 16px; padding: 0px; outline: 0px; max-width: 100%; color: rgb(51, 51, 51); clear: both; min-height: 1em; text-wrap: wrap; background-color: rgb(25, 25, 25); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; box-sizing: border-box !important; overflow-wrap: break-word !important;\">那就是 clip-path:https://developer.mozilla.org/zh-CN/docs/Web/CSS/clip-path</p><p data-style=\"margin-bottom: 16px; color: rgb(51, 51, 51); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; font-size: 16px; letter-spacing: normal; text-align: start; text-wrap: wrap;\" class=\"js_darkmode__43\" style=\"-webkit-tap-highlight-color: transparent; margin-top: 0px; margin-bottom: 16px; padding: 0px; outline: 0px; max-width: 100%; color: rgb(51, 51, 51); clear: both; min-height: 1em; text-wrap: wrap; background-color: rgb(25, 25, 25); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; box-sizing: border-box !important; overflow-wrap: break-word !important;\">相信大家对这个属性应该很熟练了，非常直观的裁剪属性。</p><p data-style=\"margin-bottom: 16px; color: rgb(51, 51, 51); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; font-size: 16px; letter-spacing: normal; text-align: start; text-wrap: wrap;\" class=\"js_darkmode__44\" style=\"-webkit-tap-highlight-color: transparent; margin-top: 0px; margin-bottom: 16px; padding: 0px; outline: 0px; max-width: 100%; color: rgb(51, 51, 51); clear: both; min-height: 1em; text-wrap: wrap; background-color: rgb(25, 25, 25); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; box-sizing: border-box !important; overflow-wrap: break-word !important;\">比如这种情况，只需要把滚动条的那一部分裁剪掉就可以了，这里要用到 clip-path 的 inset 方法</p><pre tabindex=\"0\" data-style=\"font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-size-adjust: none; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-variant-position: normal; font-stretch: normal; font-size: 13.6px; line-height: 1.45; font-family: Consolas, \"Liberation Mono\", Menlo, Courier, monospace; margin-bottom: 16px; padding: 10px; overflow: auto; background: rgb(40, 44, 52); border-radius: 3px; overflow-wrap: normal; color: rgb(51, 51, 51); letter-spacing: normal; text-align: start;\" class=\"js_darkmode__45\" style=\"-webkit-tap-highlight-color: transparent; margin-top: 0px; margin-bottom: 16px; padding: 10px; outline: 0px; max-width: 100%; overflow-wrap: normal; background-color: rgb(40, 44, 52); color: rgb(51, 51, 51); font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-size-adjust: none; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-variant-position: normal; font-stretch: normal; font-size: 13.6px; line-height: 1.45; font-family: Consolas, \"Liberation Mono\", Menlo, Courier, monospace; overflow: auto; border-radius: 3px; box-sizing: border-box !important;\">&nbsp;clip-path:&nbsp;inset()</pre><p data-style=\"margin-bottom: 16px; color: rgb(51, 51, 51); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; font-size: 16px; letter-spacing: normal; text-align: start; text-wrap: wrap;\" class=\"js_darkmode__46\" style=\"-webkit-tap-highlight-color: transparent; margin-top: 0px; margin-bottom: 16px; padding: 0px; outline: 0px; max-width: 100%; color: rgb(51, 51, 51); clear: both; min-height: 1em; text-wrap: wrap; background-color: rgb(25, 25, 25); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; box-sizing: border-box !important; overflow-wrap: break-word !important;\">这里简单介绍一下。inset 最多可以传 4 个参数，分别表示裁剪掉距离上、右、下、左的部分</p><p data-style=\"margin-bottom: 16px; color: rgb(51, 51, 51); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; font-size: 16px; letter-spacing: normal; text-align: start; text-wrap: wrap;\" class=\"js_darkmode__47\" style=\"-webkit-tap-highlight-color: transparent; margin-top: 0px; margin-bottom: 16px; padding: 0px; outline: 0px; max-width: 100%; color: rgb(51, 51, 51); clear: both; min-height: 1em; text-wrap: wrap; background-color: rgb(25, 25, 25); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; box-sizing: border-box !important; overflow-wrap: break-word !important;\"><img class=\"rich_pages wxw-img\" data-imgfileid=\"503788980\" data-ratio=\"0.7138888888888889\" data-src=\"https://tradecms.dragontrail.com/storage/202408/22/mh5LPlcIYe6ZHztq8Xi7IWSJRd1drqtV.png\" data-type=\"png\" data-w=\"1080\" data-original-style=\"null\" data-index=\"8\" src=\"https://mmbiz.qpic.cn/sz_mmbiz_png/meG6Vo0MevjIdpveQCprgqjIwjY9ZAvOiaicQbE4cVPHVOMBv8PAmXqmvTbXcs6PhdSQSVfZom6Yo1fV4sdgQCPw/640?wx_fmt=png&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1\" _width=\"677px\" crossorigin=\"anonymous\" alt=\"图片\" data-fail=\"0\" style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; vertical-align: bottom; height: auto !important; visibility: visible !important; width: 677px !important;\"/></p><p data-style=\"margin-bottom: 16px; color: rgb(51, 51, 51); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; font-size: 16px; letter-spacing: normal; text-align: start; text-wrap: wrap;\" class=\"js_darkmode__48\" style=\"-webkit-tap-highlight-color: transparent; margin-top: 0px; margin-bottom: 16px; padding: 0px; outline: 0px; max-width: 100%; color: rgb(51, 51, 51); clear: both; min-height: 1em; text-wrap: wrap; background-color: rgb(25, 25, 25); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; box-sizing: border-box !important; overflow-wrap: break-word !important;\">所以，要把滚动条隐藏就很简单了，只需要把下方的裁剪距离设置大于滚动条尺寸的值就行了，这里就用 10px</p><pre tabindex=\"0\" data-style=\"font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-size-adjust: none; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-variant-position: normal; font-stretch: normal; font-size: 13.6px; line-height: 1.45; font-family: Consolas, \"Liberation Mono\", Menlo, Courier, monospace; margin-bottom: 16px; padding: 10px; overflow: auto; background: rgb(40, 44, 52); border-radius: 3px; overflow-wrap: normal; color: rgb(51, 51, 51); letter-spacing: normal; text-align: start;\" class=\"js_darkmode__49\" style=\"-webkit-tap-highlight-color: transparent; margin-top: 0px; margin-bottom: 16px; padding: 10px; outline: 0px; max-width: 100%; overflow-wrap: normal; background-color: rgb(40, 44, 52); color: rgb(51, 51, 51); font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-size-adjust: none; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-variant-position: normal; font-stretch: normal; font-size: 13.6px; line-height: 1.45; font-family: Consolas, \"Liberation Mono\", Menlo, Courier, monospace; overflow: auto; border-radius: 3px; box-sizing: border-box !important;\"><code style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: normal; font-family: Consolas, \"Liberation Mono\", Menlo, Courier, monospace; font-size: 12px; background-color: rgba(0, 0, 0, 0.04); border-radius: 5px; word-break: normal; border-width: 0px; border-style: initial; border-color: initial; overflow: auto; line-height: inherit; color: rgb(171, 178, 191);\"> <span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(215, 186, 125);\">.list</span><span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(212, 212, 212);\">{</span><br style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important;\"/> &nbsp; <span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(156, 220, 254);\">clip-path</span><span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(212, 212, 212);\">:</span> <span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(220, 220, 170);\">inset</span><span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(212, 212, 212);\">(</span>0 0 10px<span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(212, 212, 212);\">)</span><br style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important;\"/> <span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(212, 212, 212);\">}</span></code></pre><p data-style=\"margin-bottom: 16px; color: rgb(51, 51, 51); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; font-size: 16px; letter-spacing: normal; text-align: start; text-wrap: wrap;\" class=\"js_darkmode__50\" style=\"-webkit-tap-highlight-color: transparent; margin-top: 0px; margin-bottom: 16px; padding: 0px; outline: 0px; max-width: 100%; color: rgb(51, 51, 51); clear: both; min-height: 1em; text-wrap: wrap; background-color: rgb(25, 25, 25); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; box-sizing: border-box !important; overflow-wrap: break-word !important;\">效果如下</p><p data-style=\"margin-bottom: 16px; color: rgb(51, 51, 51); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; font-size: 16px; letter-spacing: normal; text-align: start; text-wrap: wrap;\" class=\"js_darkmode__51\" style=\"-webkit-tap-highlight-color: transparent; margin-top: 0px; margin-bottom: 16px; padding: 0px; outline: 0px; max-width: 100%; color: rgb(51, 51, 51); clear: both; min-height: 1em; text-wrap: wrap; background-color: rgb(25, 25, 25); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; box-sizing: border-box !important; overflow-wrap: break-word !important;\"><img class=\"rich_pages wxw-img\" data-imgfileid=\"503788981\" data-ratio=\"0.41574074074074074\" data-src=\"https://tradecms.dragontrail.com/storage/202408/22/pG2cIWhqduc6LzvrioSu5M9ROwuBJtXj.png\" data-type=\"png\" data-w=\"1080\" data-original-style=\"null\" data-index=\"9\" src=\"https://mmbiz.qpic.cn/sz_mmbiz_png/meG6Vo0MevjIdpveQCprgqjIwjY9ZAvOKjf8N11mnHbFbBAPFczWz2p2zPR5vJQIkCJb5jJBZkicTFAcUCibXziaw/640?wx_fmt=png&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1\" _width=\"677px\" crossorigin=\"anonymous\" alt=\"图片\" data-fail=\"0\" style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; vertical-align: bottom; height: auto !important; visibility: visible !important; width: 677px !important;\"/></p><p data-style=\"margin-bottom: 16px; color: rgb(51, 51, 51); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; font-size: 16px; letter-spacing: normal; text-align: start; text-wrap: wrap;\" class=\"js_darkmode__52\" style=\"-webkit-tap-highlight-color: transparent; margin-top: 0px; margin-bottom: 16px; padding: 0px; outline: 0px; max-width: 100%; color: rgb(51, 51, 51); clear: both; min-height: 1em; text-wrap: wrap; background-color: rgb(25, 25, 25); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; box-sizing: border-box !important; overflow-wrap: break-word !important;\">一行代码轻松解决～</p><h4 data-edit=\"早书编辑器\" data-style=\"margin-top: 24px; margin-bottom: 16px; font-size: 18px; font-weight: 600; line-height: 1.25; color: rgb(51, 51, 51); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; letter-spacing: normal; text-align: start; text-wrap: wrap;\" class=\"js_darkmode__53\" style=\"-webkit-tap-highlight-color: transparent; margin: 24px 0px 16px; padding: 0px; outline: 0px; font-size: 18px; max-width: 100%; color: rgb(51, 51, 51); text-wrap: wrap; background-color: rgb(25, 25, 25); line-height: 1.25; font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; box-sizing: border-box !important; overflow-wrap: break-word !important;\">三、通过 mask 遮罩</h4><p data-style=\"margin-bottom: 16px; color: rgb(51, 51, 51); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; font-size: 16px; letter-spacing: normal; text-align: start; text-wrap: wrap;\" class=\"js_darkmode__54\" style=\"-webkit-tap-highlight-color: transparent; margin-top: 0px; margin-bottom: 16px; padding: 0px; outline: 0px; max-width: 100%; color: rgb(51, 51, 51); clear: both; min-height: 1em; text-wrap: wrap; background-color: rgb(25, 25, 25); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; box-sizing: border-box !important; overflow-wrap: break-word !important;\">其实和 clip 思路是一致的，只不过实现方式不一样。</p><p data-style=\"margin-bottom: 16px; color: rgb(51, 51, 51); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; font-size: 16px; letter-spacing: normal; text-align: start; text-wrap: wrap;\" class=\"js_darkmode__55\" style=\"-webkit-tap-highlight-color: transparent; margin-top: 0px; margin-bottom: 16px; padding: 0px; outline: 0px; max-width: 100%; color: rgb(51, 51, 51); clear: both; min-height: 1em; text-wrap: wrap; background-color: rgb(25, 25, 25); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; box-sizing: border-box !important; overflow-wrap: break-word !important;\">关于 mask 遮罩，非常使用的小技巧，主要原理是显示遮罩图片不透明的部分，透明的则会被裁剪，示意如下</p><p data-style=\"margin-bottom: 16px; color: rgb(51, 51, 51); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; font-size: 16px; letter-spacing: normal; text-align: start; text-wrap: wrap;\" class=\"js_darkmode__56\" style=\"-webkit-tap-highlight-color: transparent; margin-top: 0px; margin-bottom: 16px; padding: 0px; outline: 0px; max-width: 100%; color: rgb(51, 51, 51); clear: both; min-height: 1em; text-wrap: wrap; background-color: rgb(25, 25, 25); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; box-sizing: border-box !important; overflow-wrap: break-word !important;\"><img class=\"rich_pages wxw-img\" data-imgfileid=\"503788982\" data-ratio=\"0.4\" data-src=\"https://tradecms.dragontrail.com/storage/202408/22/5JgLeeUt6myeJFZkypUTzRfoaa9Fu5Gw.png\" data-type=\"png\" data-w=\"1080\" data-original-style=\"null\" data-index=\"10\" src=\"https://mmbiz.qpic.cn/sz_mmbiz_png/meG6Vo0MevjIdpveQCprgqjIwjY9ZAvOtGkI7icPGMWPeSZEsFWbd72Xalbb3YlQaaQvQSSoVd5XAp0DANVPBug/640?wx_fmt=png&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1\" _width=\"677px\" crossorigin=\"anonymous\" alt=\"图片\" data-fail=\"0\" style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; vertical-align: bottom; height: auto !important; visibility: visible !important; width: 677px !important;\"/></p><p data-style=\"margin-bottom: 16px; color: rgb(51, 51, 51); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; font-size: 16px; letter-spacing: normal; text-align: start; text-wrap: wrap;\" class=\"js_darkmode__57\" style=\"-webkit-tap-highlight-color: transparent; margin-top: 0px; margin-bottom: 16px; padding: 0px; outline: 0px; max-width: 100%; color: rgb(51, 51, 51); clear: both; min-height: 1em; text-wrap: wrap; background-color: rgb(25, 25, 25); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; box-sizing: border-box !important; overflow-wrap: break-word !important;\">回到这里，我们只需要绘制一个不包含滚动条部分的纯色渐变就行了，可以直接绘制一个纯色渐变，然后设置背景尺寸，如下</p><pre tabindex=\"0\" data-style=\"font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-size-adjust: none; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-variant-position: normal; font-stretch: normal; font-size: 13.6px; line-height: 1.45; font-family: Consolas, \"Liberation Mono\", Menlo, Courier, monospace; margin-bottom: 16px; padding: 10px; overflow: auto; background: rgb(40, 44, 52); border-radius: 3px; overflow-wrap: normal; color: rgb(51, 51, 51); letter-spacing: normal; text-align: start;\" class=\"js_darkmode__58\" style=\"-webkit-tap-highlight-color: transparent; margin-top: 0px; margin-bottom: 16px; padding: 10px; outline: 0px; max-width: 100%; overflow-wrap: normal; background-color: rgb(40, 44, 52); color: rgb(51, 51, 51); font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-size-adjust: none; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-variant-position: normal; font-stretch: normal; font-size: 13.6px; line-height: 1.45; font-family: Consolas, \"Liberation Mono\", Menlo, Courier, monospace; overflow: auto; border-radius: 3px; box-sizing: border-box !important;\"><code style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: normal; font-family: Consolas, \"Liberation Mono\", Menlo, Courier, monospace; font-size: 12px; background-color: rgba(0, 0, 0, 0.04); border-radius: 5px; word-break: normal; border-width: 0px; border-style: initial; border-color: initial; overflow: auto; line-height: inherit; color: rgb(171, 178, 191);\"> <span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(215, 186, 125);\">.list</span><span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(212, 212, 212);\">{</span><br style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important;\"/> &nbsp; <span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(156, 220, 254);\">-webkit-mask</span><span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(212, 212, 212);\">:</span> <span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(220, 220, 170);\">linear-gradient</span><span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(212, 212, 212);\">(</span>red<span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(212, 212, 212);\">,</span> red<span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(212, 212, 212);\">)</span> 0 0/100% <span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(220, 220, 170);\">calc</span><span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(212, 212, 212);\">(</span>100% - 10px<span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(212, 212, 212);\">)</span> no-repeat<span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(212, 212, 212);\">;</span><br style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important;\"/> <span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(212, 212, 212);\">}</span></code></pre><p data-style=\"margin-bottom: 16px; color: rgb(51, 51, 51); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; font-size: 16px; letter-spacing: normal; text-align: start; text-wrap: wrap;\" class=\"js_darkmode__59\" style=\"-webkit-tap-highlight-color: transparent; margin-top: 0px; margin-bottom: 16px; padding: 0px; outline: 0px; max-width: 100%; color: rgb(51, 51, 51); clear: both; min-height: 1em; text-wrap: wrap; background-color: rgb(25, 25, 25); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; box-sizing: border-box !important; overflow-wrap: break-word !important;\">原理示意如下</p><p data-style=\"margin-bottom: 16px; color: rgb(51, 51, 51); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; font-size: 16px; letter-spacing: normal; text-align: start; text-wrap: wrap;\" class=\"js_darkmode__60\" style=\"-webkit-tap-highlight-color: transparent; margin-top: 0px; margin-bottom: 16px; padding: 0px; outline: 0px; max-width: 100%; color: rgb(51, 51, 51); clear: both; min-height: 1em; text-wrap: wrap; background-color: rgb(25, 25, 25); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; box-sizing: border-box !important; overflow-wrap: break-word !important;\"><img class=\"rich_pages wxw-img\" data-imgfileid=\"503788971\" data-ratio=\"0.39537037037037037\" data-src=\"https://tradecms.dragontrail.com/storage/202408/22/fa2TlZqyLhjw6RaJH9yQQcXNlW0UjiXK.png\" data-type=\"png\" data-w=\"1080\" data-original-style=\"border-style: none;display: block;margin-right: auto;margin-bottom: 16px;margin-left: auto;\" data-index=\"11\" src=\"https://mmbiz.qpic.cn/sz_mmbiz_png/meG6Vo0MevjIdpveQCprgqjIwjY9ZAvOPmiaxCXV5EicgSxTOsbD5zyH9JOuiaicPdQWtqx2ibx1u5Ckib2IeehU5ggw/640?wx_fmt=png&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1\" _width=\"677px\" crossorigin=\"anonymous\" alt=\"图片\" data-fail=\"0\" style=\"-webkit-tap-highlight-color: transparent; margin: 0px auto 16px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; vertical-align: bottom; height: auto !important; border-style: none; display: block; visibility: visible !important; width: 677px !important;\"/></p><p data-style=\"margin-bottom: 16px; color: rgb(51, 51, 51); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; font-size: 16px; letter-spacing: normal; text-align: start; text-wrap: wrap;\" class=\"js_darkmode__61\" style=\"-webkit-tap-highlight-color: transparent; margin-top: 0px; margin-bottom: 16px; padding: 0px; outline: 0px; max-width: 100%; color: rgb(51, 51, 51); clear: both; min-height: 1em; text-wrap: wrap; background-color: rgb(25, 25, 25); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; box-sizing: border-box !important; overflow-wrap: break-word !important;\">也能很好的隐藏滚动条</p><p data-style=\"margin-bottom: 16px; color: rgb(51, 51, 51); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; font-size: 16px; letter-spacing: normal; text-align: start; text-wrap: wrap;\" class=\"js_darkmode__62\" style=\"-webkit-tap-highlight-color: transparent; margin-top: 0px; margin-bottom: 16px; padding: 0px; outline: 0px; max-width: 100%; color: rgb(51, 51, 51); clear: both; min-height: 1em; text-wrap: wrap; background-color: rgb(25, 25, 25); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; box-sizing: border-box !important; overflow-wrap: break-word !important;\"><img class=\"rich_pages wxw-img\" data-imgfileid=\"503788970\" data-ratio=\"0.41574074074074074\" data-src=\"https://tradecms.dragontrail.com/storage/202408/22/THtIPXRsJNTdNA80CMF65OplsN7acnMi.png\" data-type=\"png\" data-w=\"1080\" data-original-style=\"border-style: none;display: block;margin-right: auto;margin-bottom: 16px;margin-left: auto;\" data-index=\"12\" src=\"https://mmbiz.qpic.cn/sz_mmbiz_png/meG6Vo0MevjIdpveQCprgqjIwjY9ZAvOKjf8N11mnHbFbBAPFczWz2p2zPR5vJQIkCJb5jJBZkicTFAcUCibXziaw/640?wx_fmt=png&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1\" _width=\"677px\" crossorigin=\"anonymous\" alt=\"图片\" data-fail=\"0\" style=\"-webkit-tap-highlight-color: transparent; margin: 0px auto 16px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; vertical-align: bottom; height: auto !important; border-style: none; display: block; visibility: visible !important; width: 677px !important;\"/></p><p data-style=\"margin-bottom: 16px; color: rgb(51, 51, 51); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; font-size: 16px; letter-spacing: normal; text-align: start; text-wrap: wrap;\" class=\"js_darkmode__63\" style=\"-webkit-tap-highlight-color: transparent; margin-top: 0px; margin-bottom: 16px; padding: 0px; outline: 0px; max-width: 100%; color: rgb(51, 51, 51); clear: both; min-height: 1em; text-wrap: wrap; background-color: rgb(25, 25, 25); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; box-sizing: border-box !important; overflow-wrap: break-word !important;\">除此以外，mask 还可以很好的实现滚动边界渐隐的效果，只需要叠加一层从透明→纯色→透明的渐变就行了</p><pre tabindex=\"0\" data-style=\"font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-size-adjust: none; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-variant-position: normal; font-stretch: normal; font-size: 13.6px; line-height: 1.45; font-family: Consolas, \"Liberation Mono\", Menlo, Courier, monospace; margin-bottom: 16px; padding: 10px; overflow: auto; background: rgb(40, 44, 52); border-radius: 3px; overflow-wrap: normal; color: rgb(51, 51, 51); letter-spacing: normal; text-align: start;\" class=\"js_darkmode__64\" style=\"-webkit-tap-highlight-color: transparent; margin-top: 0px; margin-bottom: 16px; padding: 10px; outline: 0px; max-width: 100%; overflow-wrap: normal; background-color: rgb(40, 44, 52); color: rgb(51, 51, 51); font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-size-adjust: none; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-variant-position: normal; font-stretch: normal; font-size: 13.6px; line-height: 1.45; font-family: Consolas, \"Liberation Mono\", Menlo, Courier, monospace; overflow: auto; border-radius: 3px; box-sizing: border-box !important;\"><code style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: normal; font-family: Consolas, \"Liberation Mono\", Menlo, Courier, monospace; font-size: 12px; background-color: rgba(0, 0, 0, 0.04); border-radius: 5px; word-break: normal; border-width: 0px; border-style: initial; border-color: initial; overflow: auto; line-height: inherit; color: rgb(171, 178, 191);\"> <span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(215, 186, 125);\">.list</span><span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(212, 212, 212);\">{</span><br style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important;\"/> &nbsp; <span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(156, 220, 254);\">-webkit-mask</span><span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(212, 212, 212);\">:</span> <span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(220, 220, 170);\">linear-gradient</span><span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(212, 212, 212);\">(</span>to right<span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(212, 212, 212);\">,</span> transparent<span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(212, 212, 212);\">,</span> red 15px <span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(220, 220, 170);\">calc</span><span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(212, 212, 212);\">(</span>100% - 15px<span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(212, 212, 212);\">),</span> transparent<span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(212, 212, 212);\">),</span><br style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important;\"/> &nbsp; <span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(220, 220, 170);\">linear-gradient</span><span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(212, 212, 212);\">(</span>red<span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(212, 212, 212);\">,</span> red<span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(212, 212, 212);\">)</span> 0 0/100% <span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(220, 220, 170);\">calc</span><span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(212, 212, 212);\">(</span>100% - 10px<span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(212, 212, 212);\">)</span> no-repeat<span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(212, 212, 212);\">;</span><br style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important;\"/> &nbsp; <span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(156, 220, 254);\">-webkit-mask-composite</span><span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(212, 212, 212);\">:</span> source-in<span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(212, 212, 212);\">;</span><br style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important;\"/> <span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(212, 212, 212);\">}</span></code></pre><p data-style=\"margin-bottom: 16px; color: rgb(51, 51, 51); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; font-size: 16px; letter-spacing: normal; text-align: start; text-wrap: wrap;\" class=\"js_darkmode__65\" style=\"-webkit-tap-highlight-color: transparent; margin-top: 0px; margin-bottom: 16px; padding: 0px; outline: 0px; max-width: 100%; color: rgb(51, 51, 51); clear: both; min-height: 1em; text-wrap: wrap; background-color: rgb(25, 25, 25); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; box-sizing: border-box !important; overflow-wrap: break-word !important;\">就可以得到这样的效果</p><p data-style=\"margin-bottom: 16px; color: rgb(51, 51, 51); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; font-size: 16px; letter-spacing: normal; text-align: start; text-wrap: wrap;\" class=\"js_darkmode__66\" style=\"-webkit-tap-highlight-color: transparent; margin-top: 0px; margin-bottom: 16px; padding: 0px; outline: 0px; max-width: 100%; color: rgb(51, 51, 51); clear: both; min-height: 1em; text-wrap: wrap; background-color: rgb(25, 25, 25); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; box-sizing: border-box !important; overflow-wrap: break-word !important;\"><img class=\"rich_pages wxw-img\" data-imgfileid=\"503788973\" data-ratio=\"0.5\" data-src=\"https://tradecms.dragontrail.com/storage/202408/22/VtLkN2JSm0IzMJHJms6nD584VkdooAxV.gif\" data-type=\"gif\" data-w=\"1080\" data-original-style=\"border-style: none;display: block;margin-right: auto;margin-bottom: 16px;margin-left: auto;\" data-index=\"13\" src=\"https://mmbiz.qpic.cn/sz_mmbiz_gif/meG6Vo0MevjIdpveQCprgqjIwjY9ZAvOZZFkBF0dtbE0gRCGZUeD5TexodFicbqpduNrg79LjmCmiavlO59XwGeA/640?wx_fmt=gif&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1\" _width=\"677px\" crossorigin=\"anonymous\" alt=\"图片\" data-fail=\"0\" style=\"-webkit-tap-highlight-color: transparent; margin: 0px auto 16px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; vertical-align: bottom; height: auto !important; border-style: none; display: block; visibility: visible !important; width: 677px !important;\"/></p><p data-style=\"margin-bottom: 16px; color: rgb(51, 51, 51); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; font-size: 16px; letter-spacing: normal; text-align: start; text-wrap: wrap;\" class=\"js_darkmode__67\" style=\"-webkit-tap-highlight-color: transparent; margin-top: 0px; margin-bottom: 16px; padding: 0px; outline: 0px; max-width: 100%; color: rgb(51, 51, 51); clear: both; min-height: 1em; text-wrap: wrap; background-color: rgb(25, 25, 25); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; box-sizing: border-box !important; overflow-wrap: break-word !important;\">由于是遮罩实现，并不是简单的颜色覆盖，所以换一种背景颜色也可以很好的融合</p><p data-style=\"margin-bottom: 16px; color: rgb(51, 51, 51); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; font-size: 16px; letter-spacing: normal; text-align: start; text-wrap: wrap;\" class=\"js_darkmode__68\" style=\"-webkit-tap-highlight-color: transparent; margin-top: 0px; margin-bottom: 16px; padding: 0px; outline: 0px; max-width: 100%; color: rgb(51, 51, 51); clear: both; min-height: 1em; text-wrap: wrap; background-color: rgb(25, 25, 25); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; box-sizing: border-box !important; overflow-wrap: break-word !important;\"><img class=\"rich_pages wxw-img\" data-imgfileid=\"503788972\" data-ratio=\"0.5\" data-src=\"https://tradecms.dragontrail.com/storage/202408/22/Xf1zDtkdiILElAiPpmeYegD4Ge1grzX6.gif\" data-type=\"gif\" data-w=\"1080\" data-original-style=\"border-style: none;display: block;margin-right: auto;margin-bottom: 16px;margin-left: auto;\" data-index=\"14\" src=\"https://mmbiz.qpic.cn/sz_mmbiz_gif/meG6Vo0MevjIdpveQCprgqjIwjY9ZAvOQth5Z57A4Ml2grVmUUn3v15U70FAFW6pic1CaquyiaLhwfzZ49lejZfQ/640?wx_fmt=gif&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1\" _width=\"677px\" crossorigin=\"anonymous\" alt=\"图片\" data-fail=\"0\" style=\"-webkit-tap-highlight-color: transparent; margin: 0px auto 16px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; vertical-align: bottom; height: auto !important; border-style: none; display: block; visibility: visible !important; width: 677px !important;\"/></p><p data-style=\"margin-bottom: 16px; color: rgb(51, 51, 51); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; font-size: 16px; letter-spacing: normal; text-align: start; text-wrap: wrap;\" class=\"js_darkmode__69\" style=\"-webkit-tap-highlight-color: transparent; margin-top: 0px; margin-bottom: 16px; padding: 0px; outline: 0px; max-width: 100%; color: rgb(51, 51, 51); clear: both; min-height: 1em; text-wrap: wrap; background-color: rgb(25, 25, 25); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; box-sizing: border-box !important; overflow-wrap: break-word !important;\">以上所有完整 demo 可以查看以下链接:https://codepen.io/xboxyan/pen/GRPrzeO</p><h4 data-edit=\"早书编辑器\" data-style=\"margin-top: 24px; margin-bottom: 16px; font-size: 18px; font-weight: 600; line-height: 1.25; color: rgb(51, 51, 51); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; letter-spacing: normal; text-align: start; text-wrap: wrap;\" class=\"js_darkmode__70\" style=\"-webkit-tap-highlight-color: transparent; margin: 24px 0px 16px; padding: 0px; outline: 0px; font-size: 18px; max-width: 100%; color: rgb(51, 51, 51); text-wrap: wrap; background-color: rgb(25, 25, 25); line-height: 1.25; font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; box-sizing: border-box !important; overflow-wrap: break-word !important;\">四、总结一下</h4><p data-style=\"margin-bottom: 16px; color: rgb(51, 51, 51); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; font-size: 16px; letter-spacing: normal; text-align: start; text-wrap: wrap;\" class=\"js_darkmode__71\" style=\"-webkit-tap-highlight-color: transparent; margin-top: 0px; margin-bottom: 16px; padding: 0px; outline: 0px; max-width: 100%; color: rgb(51, 51, 51); clear: both; min-height: 1em; text-wrap: wrap; background-color: rgb(25, 25, 25); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; box-sizing: border-box !important; overflow-wrap: break-word !important;\">以上共介绍了 3 种方式来隐藏滚动条，各有千秋</p><ul class=\"js_darkmode__72 list-paddingleft-2\" data-style=\"padding-left: 2em; margin-bottom: 16px; color: rgb(51, 51, 51); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; font-size: 16px; letter-spacing: normal; text-align: start; text-wrap: wrap;\" style=\"-webkit-tap-highlight-color: transparent; margin-bottom: 16px; padding: 0px 0px 0px 2em; outline: 0px; max-width: 100%; color: rgb(51, 51, 51); text-wrap: wrap; background-color: rgb(25, 25, 25); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; box-sizing: border-box !important; overflow-wrap: break-word !important;\"><li><p style=\"-webkit-tap-highlight-color: transparent; margin-top: 0px; margin-bottom: 0px; padding: 0px; outline: 0px; max-width: 100%; clear: both; min-height: 1em; box-sizing: border-box !important; overflow-wrap: break-word !important;\">overflow 兼容性最好，也最直观，符合大多数人思路，缺点是需要单独嵌套一层父级</p></li><li><p style=\"-webkit-tap-highlight-color: transparent; margin-top: 0px; margin-bottom: 0px; padding: 0px; outline: 0px; max-width: 100%; clear: both; min-height: 1em; box-sizing: border-box !important; overflow-wrap: break-word !important;\">clip 实现最简洁，也比较好理解，在本案例中最为推荐</p></li><li><p style=\"-webkit-tap-highlight-color: transparent; margin-top: 0px; margin-bottom: 0px; padding: 0px; outline: 0px; max-width: 100%; clear: both; min-height: 1em; box-sizing: border-box !important; overflow-wrap: break-word !important;\">mask 思路和 clip，实现起来稍微复杂一点，还可以实现更为复杂的渐隐效果，能够掌握更好</p></li></ul><p data-style=\"margin-bottom: 16px; color: rgb(51, 51, 51); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; font-size: 16px; letter-spacing: normal; text-align: start; text-wrap: wrap;\" class=\"js_darkmode__73\" style=\"-webkit-tap-highlight-color: transparent; margin-top: 0px; margin-bottom: 16px; padding: 0px; outline: 0px; max-width: 100%; color: rgb(51, 51, 51); clear: both; min-height: 1em; text-wrap: wrap; background-color: rgb(25, 25, 25); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; box-sizing: border-box !important; overflow-wrap: break-word !important;\">当然不仅仅只是本文的案例，很多场景都可以去尝试用多种方式去实现，更多的是发挥自己的想象，这样的 CSS 不是更有趣吗？</p><p data-style=\"color: rgb(51, 51, 51); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; font-size: 16px; letter-spacing: normal; text-align: start; text-wrap: wrap; margin-bottom: 0px !important;\" class=\"js_darkmode__74\" style=\"-webkit-tap-highlight-color: transparent; margin-top: 0px; padding: 0px; outline: 0px; max-width: 100%; color: rgb(51, 51, 51); clear: both; min-height: 1em; text-wrap: wrap; background-color: rgb(25, 25, 25); font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; margin-bottom: 0px !important; box-sizing: border-box !important; overflow-wrap: break-word !important;\"><span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; font-size: 14px; color: rgb(136, 136, 136);\">关于本文<br style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important;\"/>作者：@XboxYan<br style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important;\"/>原文：https://mp.weixin.qq.com/s/qiPO46N-wrYCfO9nHMdACw</span></p><p style=\"-webkit-tap-highlight-color: transparent; margin-top: 0px; margin-bottom: 24px; padding: 0px; outline: 0px; max-width: 100%; clear: both; min-height: 1em; color: rgba(255, 255, 255, 0.6); font-family: \"PingFang SC\", system-ui, -apple-system, \"system-ui\", \"Helvetica Neue\", \"Hiragino Sans GB\", \"Microsoft YaHei UI\", \"Microsoft YaHei\", Arial, sans-serif; font-size: 17px; letter-spacing: 0.544px; text-wrap: wrap; background-color: rgb(25, 25, 25); text-align: center; box-sizing: border-box !important; overflow-wrap: break-word !important;\"><img class=\"rich_pages wxw-img\" data-imgfileid=\"503757650\" data-ratio=\"0.4166666666666667\" data-s=\"300,640\" data-src=\"https://tradecms.dragontrail.com/storage/202408/22/KiaWEZT9ETfGXrX4TWvkZt9OM1JUnjYo.jpg\" data-type=\"jpeg\" data-w=\"720\" data-original-style=\"\" data-index=\"15\" src=\"https://mmbiz.qpic.cn/mmbiz_jpg/meG6Vo0MevgiaJGuXA28v4rRxoibyhrCjcAWn51S1CYXu0S95uXBUZTn6z15bA8ARkzAhdqgwxSBSl3lFCFAPbGg/640?wx_fmt=jpeg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1\" _width=\"677px\" crossorigin=\"anonymous\" alt=\"图片\" data-fail=\"0\" style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; vertical-align: bottom; height: auto !important; visibility: visible !important; width: 677px !important;\"/></p><p style=\"-webkit-tap-highlight-color: transparent; margin-top: 0px; margin-bottom: 0px; padding: 0px; outline: 0px; max-width: 100%; clear: both; min-height: 1em; color: rgba(255, 255, 255, 0.6); font-family: \"PingFang SC\", system-ui, -apple-system, \"system-ui\", \"Helvetica Neue\", \"Hiragino Sans GB\", \"Microsoft YaHei UI\", \"Microsoft YaHei\", Arial, sans-serif; font-size: 17px; letter-spacing: 0.544px; text-wrap: wrap; background-color: rgb(25, 25, 25); text-align: right; box-sizing: border-box !important; overflow-wrap: break-word !important;\"><span data-style=\"-webkit-tap-highlight-color: transparent; outline: 0px; letter-spacing: 0.544px; font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; font-size: 14px; color: rgb(0, 82, 255);\" class=\"js_darkmode__75\" style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(0, 82, 255); letter-spacing: 0.544px; font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; font-size: 14px;\">这期前端早读课<br style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important;\"/>对你有帮助，帮”&nbsp;</span><span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; letter-spacing: 0.544px; font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; font-size: 14px; color: rgb(255, 76, 0);\">赞</span><span data-style=\"-webkit-tap-highlight-color: transparent; outline: 0px; letter-spacing: 0.544px; font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; font-size: 14px; color: rgb(0, 82, 255);\" class=\"js_darkmode__76\" style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(0, 82, 255); letter-spacing: 0.544px; font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; font-size: 14px;\">&nbsp;“一下，<br style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important;\"/>期待下一期，帮”</span><span style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; letter-spacing: 0.544px; font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; font-size: 14px; color: rgb(255, 76, 0);\">&nbsp;在看</span><span data-style=\"-webkit-tap-highlight-color: transparent; outline: 0px; letter-spacing: 0.544px; font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; font-size: 14px; color: rgb(0, 82, 255);\" class=\"js_darkmode__77\" style=\"-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(0, 82, 255); letter-spacing: 0.544px; font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif; font-size: 14px;\">” 一下 。</span></p><p><br/></p>",
      "tags": [],
      "status": true,
      "is_headlines": 0,
      "views": 0,
      "users": 0,
      "favorites": 0,
      "sort": 0,
      "created_at": "2024-08-22 12:16:44",
      "updated_at": "2024-08-22 12:16:44",
      "deleted_at": null,
      "categories": [
          {
              "id": 595,
              "name": "当季热卖"
          }
      ],
      "source_type": "article",
      "state": null,
      "attachments": []
  })
  }
  filterProxy(query: any) {
    // activity/france_activity_2024/api/get-data?type=articles&page=1&pageSize=1000&category_id=595
    let proxyUrl = `https://etc.tradecms.dragontrail.com/api/v2/trade-cms/search`
    if (query.type === "articles") {
      proxyUrl = `http://test.minisite.cn/activity/france_activity_2024/api/get-data`
    }
    return defer(() => 
      // ?type=videos&category_id=508,515&sort=views:desc&pageSize=50&agency_id=1868
      axios.get(proxyUrl, {
        params: {
          ...query, agency_id: 1868
        }
      })
    ).pipe(
      map(d => d.data)
    )
  }
  filter() {
    return IResponse.success({
      total: 30,
      items: Array(100).fill("").map(() => {
        return {
          "id": mockjs.Random.id(),
          "admin_id": 46,
          "name": mockjs.Random.ctitle(10, 50),
          "url": "https://live.frp.wonew.top/static/ds/1500236900-1-192.mp4",
          "cover": "https://live.frp.wonew.top/static/ds/a0f509f22b00d2d3059a666a35230a3873fde7a2.jpg",
          "status": 1,
          "source_type": "video",
          "is_recommend": false,
          "views": 0,
          "download_url": "https:\/\/tradecms.dragontrail.com\/video\/334\/download",
          "created_at": 1724128174,
          "updated_at": 1724150348,
          "favored": false,
          "fav_num": mockjs.Random.natural(10, 50000),
        }
      })
    })
  }
}
